//**
const EventBus = new Vue();

const inputComponent = {
    template: `<input 
        :placeholder="placeholder"
        v-model="input"
        @keyup.enter="monitorEnterKey"
        class='input is-small' type='text' />`,
    props: ['placeholder'],
    data() {
        return {
            input: ""
        };
    },
    methods: {
        monitorEnterKey() {
            //EventBus.$emit触发事件 对应Event.$on
            //第一个参数 事件名称 第二个参数 携带的数据
            EventBus.$emit("add-note", {
                note: this.input,
                timestamp: new Date().toLocaleString()
            });
            this.input = "";
        }
    }
};

const noteCountComponent = {
    template: `<div class="note-count">Note count: <strong>{{noteCount}}</strong></div>`,
    data() {
        return {
            noteCount: 0
        }
    },
    //生命周期回调 创建时候调用
    created() {
        console.log("noteCount life cycle created:", this.notes)
        //适合在这里处理事件
        EventBus.$on("add-note", event => this.noteCount++);
    },
};

new Vue({
    el: "#app",
    components: {
        "input-component": inputComponent,
        'note-count-component': noteCountComponent
    },
    data() {
        return {
            notes: [],
            timestamps: [],
            placeholder: 'Enter a note'
        }
    },
    methods: {
        addNote(event) {
            this.notes.push(event.note);
            this.timestamps.push(event.timestamp);
        }
    },
    //生命周期回调 创建时候调用
    created() {
        console.log("vue life cycle created:", this.notes)
        //适合在这里处理事件
        EventBus.$on("add-note", event => this.addNote(event));
    },
    //生命周期回调 更新数据时候调用
    updated() {
        console.log("vue life cycle created:", this.notes)
    }
})